@using Microsoft.AspNetCore.Components
@inject IJSRuntime JsRuntime

<DocMatButton></DocMatButton>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        @using Microsoft.AspNetCore.Components

        <h4 class="mat-subtitle1">Simple use</h4>
        <MatButton Icon="favorite" OnClick="@RunOnClick" Label="Simple Button"></MatButton>

        <h5 class="mat-subtitle1">With Font-Awsome Icons and Link</h5>
        <MatButton Link="https://github.com/BlazorComponents/MatBlazor">
            <i class="fa fa-github" aria-hidden="true"></i> &nbsp; Github
        </MatButton>

        <h5 class="mat-subtitle1">With Font-Awsome Icons and Link in a new Window  - Target Defined</h5>
        <MatButton Link="https://github.com/BlazorComponents/MatBlazor" Target="_blank">
            <i class="fa fa-github" aria-hidden="true"></i> &nbsp; Github
        </MatButton>

        <h5 class="mat-subtitle1">Internal Link in a new Window - Target Defined</h5>
        <MatButton Link="/TextField" Target="_blank">
            <i class="fa fa-paragraph" aria-hidden="true"></i> &nbsp; TextField
        </MatButton>

        @code
        {

            public void RunOnClick(MouseEventArgs e)
            {
                JsRuntime.InvokeAsync<object>("window.alert", "Test");
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        @using Microsoft.AspNetCore.Components

        <h4 class=""mat-subtitle1"">Simple use</h4>
        <MatButton Icon=""favorite"" OnClick=""@RunOnClick"" Label=""Simple Button""></MatButton>

        <h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link</h5>
        <MatButton Link=""https://github.com/BlazorComponents/MatBlazor"">
            <i class=""fa fa-github"" aria-hidden=""true""></i> &nbsp; Github
        </MatButton>

        <h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link in a new Window  - Target Defined</h5>
        <MatButton Link=""https://github.com/BlazorComponents/MatBlazor"" Target=""_blank"">
            <i class=""fa fa-github"" aria-hidden=""true""></i> &nbsp; Github
        </MatButton>

        <h5 class=""mat-subtitle1"">Internal Link in a new Window - Target Defined</h5>
        <MatButton Link=""/TextField"" Target=""_blank"">
            <i class=""fa fa-paragraph"" aria-hidden=""true""></i> &nbsp; TextField
        </MatButton>

        @code
        {

            public void RunOnClick(MouseEventArgs e)
            {
                JsRuntime.InvokeAsync<object>(""window.alert"", ""Test"");
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Button types</h5>
<DemoContainer>
    <Content>
        <MatButton OnClick="@Click">Text @ButtonState</MatButton>
        <MatButton Raised="true">Raised</MatButton>
        <MatButton Unelevated="true">Unelevated</MatButton>
        <MatButton Outlined="true">Outlined</MatButton>
        <MatButton Dense="true">Dense</MatButton>

        @code
        {
            string ButtonState = "";

            void Click(MouseEventArgs e)
            {
                ButtonState = "Clicked";
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatButton OnClick=""@Click"">Text @ButtonState</MatButton>
        <MatButton Raised=""true"">Raised</MatButton>
        <MatButton Unelevated=""true"">Unelevated</MatButton>
        <MatButton Outlined=""true"">Outlined</MatButton>
        <MatButton Dense=""true"">Dense</MatButton>

        @code
        {
            string ButtonState = """";

            void Click(MouseEventArgs e)
            {
                ButtonState = ""Clicked"";
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Disabled</h5>
<DemoContainer>
    <Content>
        <MatButton Disabled="true">Text</MatButton>
        <MatButton Raised="true" Disabled="true">Raised</MatButton>
        <MatButton Unelevated="true" Disabled="true">Unelevated</MatButton>
        <MatButton Outlined="true" Disabled="true">Outlined</MatButton>
        <MatButton Dense="true" Disabled="true">Dense</MatButton>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatButton Disabled=""true"">Text</MatButton>
        <MatButton Raised=""true"" Disabled=""true"">Raised</MatButton>
        <MatButton Unelevated=""true"" Disabled=""true"">Unelevated</MatButton>
        <MatButton Outlined=""true"" Disabled=""true"">Outlined</MatButton>
        <MatButton Dense=""true"" Disabled=""true"">Dense</MatButton>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Icons</h5>
<DemoContainer>
    <Content>
        <MatButton Icon="favorite">Text</MatButton>
        <MatButton Raised="true" Icon="favorite">Raised</MatButton>
        <MatButton Unelevated="true" Icon="favorite">Unelevated</MatButton>
        <MatButton Outlined="true" Icon="favorite">Outlined</MatButton>
        <MatButton Dense="true" Icon="favorite">Dense</MatButton>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatButton Icon=""favorite"">Text</MatButton>
        <MatButton Raised=""true"" Icon=""favorite"">Raised</MatButton>
        <MatButton Unelevated=""true"" Icon=""favorite"">Unelevated</MatButton>
        <MatButton Outlined=""true"" Icon=""favorite"">Outlined</MatButton>
        <MatButton Dense=""true"" Icon=""favorite"">Dense</MatButton>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Trailing Icons</h5>
<DemoContainer>
    <Content>
        <MatButton TrailingIcon="favorite">Text</MatButton>
        <MatButton Raised="true" TrailingIcon="favorite">Raised</MatButton>
        <MatButton Unelevated="true" TrailingIcon="favorite">Unelevated</MatButton>
        <MatButton Outlined="true" TrailingIcon="favorite">Outlined</MatButton>
        <MatButton Dense="true" TrailingIcon="favorite">Dense</MatButton>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatButton TrailingIcon=""favorite"">Text</MatButton>
        <MatButton Raised=""true"" TrailingIcon=""favorite"">Raised</MatButton>
        <MatButton Unelevated=""true"" TrailingIcon=""favorite"">Unelevated</MatButton>
        <MatButton Outlined=""true"" TrailingIcon=""favorite"">Outlined</MatButton>
        <MatButton Dense=""true"" TrailingIcon=""favorite"">Dense</MatButton>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Button Type</h5>
<DemoContainer>
    <Content>
        <form>
            <MatButton type="submit" name="action">OK</MatButton>
        </form>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <form>
            <MatButton type=""submit"" name=""action"">OK</MatButton>
        </form>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>